<template>
    <div v-show="userState.pageIndex === 2" class="registe_container">
        <h3>注册</h3>
        <button class="wx_login" @click="useWxLogin">继续使用微信</button>
        <div class="or">
            <span>或</span>
        </div>
        <el-form class="email_form" :model="registData" :rules="emailRules" ref="formEmailRef">
            <el-form-item label="" prop="email">
                <p>电子邮件</p>
                <el-input type="text" v-model="registData.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
                <p>密码</p>
                <el-input type="password" show-password v-model="registData.password" placeholder="请输入密码"></el-input>
            </el-form-item>
        </el-form>
        <button class="regist_btn" @click="createLogin">创建账户</button>
        <p class="regist_statement">
            创建您的账户，则表示您同意 <a href="javascript:;" @click="useTerm">使用条款</a> 和 <a href="javascript:;" @click="privacyPolicy">隐私政策</a> <br>
            已有账户？ <a href="javascript:;" @click="toLoginPage()">登录</a>
        </p>
    </div>
</template>

<script setup>
import { reactive, ref, toRaw } from 'vue';
import { checkNotEmail } from '../../utils/validateUtil';
import { useUserStore } from '../../store/user';
import { ElLoading, ElMessage } from 'element-plus';
import { registe } from '../../api/login';
const { userState  } = useUserStore();

const formEmailRef = ref(null)
let registData = reactive({
    email: '', //'82197993@qq.com',
    password: '' //'123123'
})

const validateMail = (rule, value, callback) => {
  if (!checkNotEmail(value)) {
    callback(new Error())
  }
  callback();
};

const emailRules = {
    email: [
        {required: true, message: '请输入邮箱', trigger: 'blur'},
        { validator: validateMail, message: '请输入正确的邮箱格式', trigger: 'blur' }
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
    ]
}

// 使用条款
function useTerm() {

}


// 隐私政策
function privacyPolicy() {

}


userState.wechatLogin = false
function useWxLogin() {
    userState.pageIndex = 1
    userState.wechatLogin= true
}

function toLoginPage() {
    userState.pageIndex = 0
}

function createLogin() {
    formEmailRef.value.validate((valid) => {
        registe(toRaw(registData)).then(res => {

            console.log(res)
            const loading = ElLoading.service({
                target: document.querySelector('.registe_container'),
                text: '注册中请稍后',
                customClass: 'custom-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            if(res.data.status) {
                ElMessage({
                    message: '注册成功，请登录',
                    type: 'success',
                    duration: 5000
                })
                setTimeout(() => {
                    loading.close()
                    userState.pageIndex = 0
                },5000)
                
            } else {
                ElMessage({
                    message: res.data.msg,
                    type: 'error',
                    duration: 5000
                })
                setTimeout(() => {
                    loading.close()
                },5000)
                
            }
        })
    })
}

</script>

<style scoped>
.registe_container {
    background: linear-gradient(180deg, rgba(161, 166, 190, 1) 0%, rgba(148, 129, 183, 1) 51.99999809265137%, rgba(174, 149, 250, 1) 100%);
    border-radius: 6px;
    width: 576px;
    height: 570px;
    padding: 50px 80px !important;
    box-sizing: border-box;
    font-size: 14px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11;
}

.registe_container h3{
    font-size: 18px;
}
.wx_login {
    width: 100%;
    height: 39px;
    margin: 0 auto;
    border: 1px solid #FFF;
    border-radius: 5px;
    margin-top: 20px;
    color: #FFF;
    font-size: 18px;
}

.or {
    width: 100%;
    height: 39px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    position: relative;
}

.or::before{
    content: '';
    width: 180px;
    height: 1px;
    background-color: #C4C7CF;
    position: absolute;
    left: 0;
    top: 19px;
}

.or::after{
    content: '';
    width: 180px;
    height: 1px;
    background-color: #C4C7CF;
    position: absolute;
    right: 0;
    top: 19px;
}

.email_form {
    width: 100%;
}

.email_form .el-form-item {
    margin-bottom: 20px;
}

.regist_btn{
    width: 100%;
    height: 40px;
    background: linear-gradient(90deg, rgba(82, 240, 227, 1) 0%, rgba(243, 114, 255, 1) 100%);
    color: #FFF;
    font-size: 18px;
    border-radius: 5px;
    margin-top: 10px;
}

.regist_statement {
    width: 100%;
    margin-top: 30px;
    color: #191B23;
    line-height: 26px;
    font-size: 14px;
}

.regist_statement a {
    color: #7848F1;
    border-bottom: 1px solid #006DCA;
}


.el-form-item {
    margin-bottom: 30px;
}

.el-input {
    --el-input-focus-border-color: #FFF !important;
}

:deep(.el-input__wrapper) {
      height: 32px !important;
      background-color: transparent !important;
      border: none;
      box-shadow: 0 0 0 1px #FFF !important;
  }

:deep(.el-input__inner) {
  color: #FFF;
  font-size: 14px !important;
}

:deep(.el-form-item__label) {
    font-size: 14px !important;
    line-height: 36px  !important;
}

</style>